<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体平移旋转缩放</title>
    <style>
        body {
            margin: 0px;
            overflow: hidden;
        }

        #translate {
            border: 3px solid blue;
            display: block;
        }

        #ui-translate {
            position: absolute;
            left: 810px;
            top: 10px;
        }

        #ui-rotate {
            position: absolute;
            left: 820px;
            top: 160px;
        }
    </style>
</head>

<body>
<canvas id="translate" width="800" height="600"></canvas>
<div id="ui-translate"></div>
<div id="ui-rotate"></div>
<script type="text/javascript" src="../libs/webgl-utils.js"></script>
<script type="text/javascript" src="../libs/webgl-ui.js"></script>
<script type="text/javascript" src="../libs/shader.js"></script>
<script type="text/javascript" src="../libs/dat.gui.min.js"></script>
<script type="text/javascript" src="../libs/jQuery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="../libs/jquery.mousecapture.js"></script>
<script type="text/javascript" src="../libs/jquery.gman.ui.js"></script>
<script type="text/javascript" src="../libs/jquery-gman-circle.js"></script>


<script id="v-shader" type="x-shader/x-vertex">
        attribute vec2 a_position;
        uniform vec2 u_resolution;//分辨率
        uniform vec2 u_translate;//平移
        uniform vec2 u_rotate;//旋转
        uniform vec2 u_scale;//缩放
        varying vec4 v_color;

        void main()
        {
          vec2 sPosition = a_position * u_scale;
          vec2 rotatePosition = vec2(
              sPosition.x * u_rotate.y + sPosition.y * u_rotate.x,
              sPosition.y * u_rotate.y - sPosition.x * u_rotate.x);

          vec2 position = rotatePosition + u_translate;
          vec2 zeroToOne = position / u_resolution;
          vec2 zeroToTwo = zeroToOne * 2.0;
          vec2 clipSpace = zeroToTwo - 1.0;

          gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);//(1，-1)将坐标原点设置为左上角

          v_color = vec4(gl_Position.xyz * 0.5, 0.6);
        }
    </script>

<script id="f-shader" type="x-shader/x-vertex">
        #ifdef GL_ES
        precision mediump float;
        #endif

        varying vec4 v_color;

        void main()
        {
          gl_FragColor = v_color.rbga;
        }
</script>
<script type="text/javascript">
    "use strict";

    let translate = [100, 150];
    let rotate = [0, 1];
    let scale = [1, 1];

    //王
    let wang = [
        //第一横
        0, 0,
        150, 0,
        0, 30,
        0, 30,
        150, 0,
        150, 30,

        //第二横
        0, 80,
        150, 80,
        0, 110,
        0, 110,
        150, 80,
        150, 110,

        //第三横
        0, 160,
        150, 160,
        0, 190,
        0, 190,
        150, 160,
        150, 190,

        //竖
        60, 30,
        60, 160,
        90, 30,
        90, 30,
        60, 160,
        90, 160
    ];

    //华
    let hua = [
        45, 60,
        75, 80,
        0, 140,

        35, 120,
        65, 120,
        35, 240,
        35, 240,
        65, 120,
        65, 240,

        125, 80,
        155, 80,
        125, 240,
        125, 240,
        155, 80,
        155, 240,

        200, 80,
        220, 100,
        155, 140,

        135, 210,
        205, 210,
        135, 240,
        135, 240,
        205, 210,
        205, 240,

        0, 250,
        210, 250,
        0, 280,
        0, 280,
        210, 250,
        210, 280,

        85, 180,
        115, 180,
        85, 400,
        85, 400,
        115, 180,
        115, 400
    ];

    let guiField = {
        '平移X': translate[0],
        '平移Y': translate[1],
        '缩放X': scale[0],
        '缩放Y': scale[1]
    };
    main();

    function main() {
        let canvas = document.getElementById('translate');
        let gl = canvas.getContext('webgl', {antialias: true, depth: false})
        if (!gl) {
            alert("您的浏览器不支持WebGL!")
        }

        //获取顶点和片段着色器文本
        let vShaderSource = document.getElementById('v-shader').text;
        let fShaderSource = document.getElementById('f-shader').text;

        //创建着色器程序
        let program = initShader(gl, vShaderSource, fShaderSource);

        program.pLocation = getAttribute(gl, program, 'a_position');

        program.rLocation = getUniform(gl, program, 'u_resolution');
        program.tLocation = getUniform(gl, program, 'u_translate');
        program.roLocation = getUniform(gl, program, 'u_rotate');
        program.sLocation = getUniform(gl, program, 'u_scale');

        //创建缓冲区
        program.positionBuffer = gl.createBuffer();
        //绑定缓冲区
        gl.bindBuffer(gl.ARRAY_BUFFER, program.positionBuffer);

        drawScene(gl, program);
        initGui(gl, program);

        //创建旋转控制圆
        $("#ui-rotate").gmanUnitCircle({
            width: 200,
            height: 200,
            value: 0,
            slide: function(e,u) {
                rotate[0] = u.x;
                rotate[1] = u.y;
                drawScene(gl, program);
            }
        });
    }

    //设置菜单
    function initGui(gl, program) {
        let gui = new dat.GUI();
        gui.add(guiField, '平移X', 0, gl.canvas.width-200).onChange(function(e) {
            translate[0] = e;
            drawScene(gl, program);
        });
        gui.add(guiField, '平移Y', 0, gl.canvas.height-200).onChange(function(e) {
            translate[1] = e;
            drawScene(gl, program);
        });
        
        gui.add(guiField, '缩放X', -4, 4).onChange(function (e) {
            scale[0] = e;
            drawScene(gl, program)
        });
        gui.add(guiField, '缩放Y', -4, 4).onChange(function (e) {
            scale[1] = e;
            drawScene(gl, program)
        });

        let ui = document.getElementById('ui-translate');
        ui.appendChild(gui.domElement);
    }

    //获取着色器中的attribute变量的位置
    function getAttribute(gl, program, name) {
        return gl.getAttribLocation(program, name);
    }
    //获取着色器中的uniform变量的位置
    function getUniform(gl, program, name) {
        return gl.getUniformLocation(program, name)
    }

    function drawScene(gl, program) {
        webglUtils.resizeCanvasToDisplaySize(gl.canvas);
        //告诉WebGL如何从剪辑空间转换为像素
        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
        //清除canvas
        gl.clear(gl.COLOR_BUFFER_BIT);

        //应用着色器程序
        gl.useProgram(program);

        //开启顶点属性
        gl.enableVertexAttribArray(program.pLocation);
        //绑定缓冲区
        gl.bindBuffer(gl.ARRAY_BUFFER, program.positionBuffer);

        setGeometry(gl, wang);

        //获取缓冲区数据
        gl.vertexAttribPointer(program.pLocation, 2, gl.FLOAT, false, 0, 0);

        //设置分辨率
        gl.uniform2f(program.rLocation, gl.canvas.width, gl.canvas.height);

        //旋转
        gl.uniform2fv(program.roLocation, rotate);

        //设置平移
        gl.uniform2fv(program.tLocation, translate);
        
        //设置缩放
        gl.uniform2fv(program.sLocation, scale);

        gl.drawArrays(gl.TRIANGLES, 0, wang.length / 2);

    }

    //设置矩形坐标
    function setGeometry(gl, array) {
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(array), gl.STATIC_DRAW);
    }
</script>
</body>
</html>